import './color-panel-dom.less';
import { createElement } from '../utils/dom-helper';
export function start() {
    let container = createElement('div', {'class': 'dd-container'});
    document.querySelector('body').appendChild(container);
    let panelContainer = createElement('div', {'class': 'z-color-panel'});
    container.appendChild(panelContainer);
    panelContainer.innerHTML = `
        <canvas class="z-color-panel-picker"></canvas>
        <div class="z-color-panel-args-area">
            <div class="z-color-panel-bar-area">
                <div class="z-scroll-area z-base-color">
                    <span class="z-bar"></span>
                    <canvas width="10" height="10" class="z-color-canvas"></canvas>
                </div>
                <div class="z-scroll-area z-opacity-color">
                    <span class="z-bar"></span>
                    <canvas width="10" height="10" class="z-color-canvas"></canvas>
                </div>
            </div>
            <div class="z-current-color-show">
            </div>
        </div>
        <div class="z-present-color-value">
            <div class="z-value z-hex">
                <input />
                <label>
                    Hex
                </label>
            </div>
            <div class="z-value z-rgba z-rgba-r">
                <input />
                <label>
                    R
                </label>
            </div>
            <div class="z-value z-rgba z-rgba-g">
                <input />
                <label>
                    G
                </label>
            </div>
            <div class="z-value z-rgba z-rgba-b">
                <input />
                <label>
                    B
                </label>
            </div>
            <div class="z-value z-rgba z-rgba-a">
                <input />
                <label>
                    A
                </label>
            </div>
        </div>
    `;
}